<template>
  <van-grid :border="false" :column-num="4">
    <van-grid-item v-for="(item,index) in recommends" :key="index">
      <a :href="item.link">
        <van-image :src="item.image" />
        <span class="TJtitle">{{ item.title }}</span>
      </a>
    </van-grid-item>
  </van-grid>
</template>

<script>
import Vue from "vue";
import { Grid, GridItem, Image } from "vant";

Vue.use(Grid)
  .use(GridItem)
  .use(Image);
export default {
  props: {
    recommends: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.van-grid {
  border-bottom: 10px solid #eee;
  .van-grid-item {
    text-align: center;
    .TJtitle {
      font-size: 13px;
    }
  }
}
</style>